<template>
	<text v-if="ty">没有地址</text>
	<view class="" v-if="sh">
      <u-swipe-action ref="qwe" v-if="show">
        <u-swipe-action-item
          :options="options1"
		  @click="cut"
        >
          <view class="swipe-action u-border-top u-border-bottom">
            <view class="swipe-action__content">
              <view class="address">
              	<view class="uni-swipe item">
              		<view class="uni-swipe_text--center">
              			<view class="item-content">
              				<view class="user">
              					Jesence 
								<text class="contact">13512345678</text>
								<text class="badge">默认</text>
              				</view>
							<view class="locate">
								天津市 天津市 河东区 中南海
							</view>
							<navigator class="edit" url="/pages/modify/modify" open-type="navigate">
								 修改 
							</navigator>
              			</view>
              		</view>
              	</view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
	  
	  
	  <u-swipe-action ref="qwe" v-if="show1">
	    <u-swipe-action-item
	      :options="options1"
		  @click="cut1"
	    >
	      <view class="swipe-action u-border-top u-border-bottom">
	        <view class="swipe-action__content">
	          <view class="address">
	          	<view class="uni-swipe item">
	          		<view class="uni-swipe_text--center">
	          			<view class="item-content">
	          				<view class="user">
	          					Jesence 
	  								<text class="contact">13512345678</text>
	  								<text class="badge">默认</text>
	          				</view>
	  							<view class="locate">
	  								天津市 天津市 河东区 中南海
	  							</view>
	  							<navigator class="edit" url="/pages/modify/modify" open-type="navigate">
	  								 修改 
	  							</navigator>
	          			</view>
	          		</view>
	          	</view>
	          </view>
	        </view>
	      </view>
	    </u-swipe-action-item>
	  </u-swipe-action>
	  
	  
	  <u-swipe-action ref='qwe' v-if="show2">
	    <u-swipe-action-item
	      :options="options1"
		  @click="cut2"
	    >
	      <view class="swipe-action u-border-top u-border-bottom">
	        <view class="swipe-action__content">
	          <view class="address">
	          	<view class="uni-swipe item">
	          		<view class="uni-swipe_text--center">
	          			<view class="item-content">
	          				<view class="user">
	          					Jesence 
	  								<text class="contact">13512345678</text>
	  								<text class="badge">默认</text>
	          				</view>
	  							<view class="locate">
	  								天津市 天津市 河东区 中南海
	  							</view>
	  							<navigator class="edit" url="/pages/modify/modify" open-type="navigate">
	  								 修改 
	  							</navigator>
	          			</view>
	          		</view>
	          	</view>
	          </view>
	        </view>
	      </view>
	    </u-swipe-action-item>
	  </u-swipe-action>
	</view>
	<navigator url="/pages/modify/modify" open-type="navigate">
			<button class="add-btn"> 新建地址 </button>
	</navigator>
</template>

<script setup>
	import {ref,watch} from 'vue'
	const options1=ref([{
                    text: '删除',
					style: {
					              backgroundColor: '#cf4444',
					          }
                }])
		const ty=ref(false)
		const sh=ref(true)
	    const qwe = ref(null);
		const show=ref(true)
		const show1=ref(true)
		const show2=ref(true)
	    const cut = () => {
	      console.log(1);
			show.value=false
		  
			// const parentElement = qwe.value.$el.parentNode;
			// parentElement.removeChild(qwe.value.$el);
	    };
		const cut1=()=>{
			console.log(2);
			show1.value=false
		}
		const cut2=()=>{
			console.log(3);
			show2.value=false
		}
		    watch([show, show1, show2], ([newShow, newShow1, newShow2]) => {
		      if (!newShow && !newShow1 && !newShow2) {
		        ty.value=true
		      }
		    });
</script>

<style lang="scss">

button{
		position: fixed;
		bottom: 0;
		width: 22rem;
	    height: 2.5rem;
	    margin: 0.9375rem 0.625rem;
	    color: #fff;
	    border-radius: 2.5rem;
	    font-size: .9375rem;
	    background-color: #27ba9b;
	}
    .u-page {
        padding: 0;
    }
    .u-demo-block__title {
        padding: 10px 0 2px 15px;
    }
	.u-swipe-action{
		// padding: 0 0.625rem;
		margin: 0 0.625rem;
		border-radius: 0.3125rem;
		background-color: #fff;
	}
    .swipe-action {

        &__content {
             padding: 1rem 0.625rem;
    
            &__text {
                 font-size: 15px;
                 color: $u-main-color;
                 padding-left: 30rpx;
             }
        }
    }
	.uni-swipe_text--center{
	    width: 100%;
	    cursor: grab;
		.item-content{
			line-height: 1;
			    padding: 0.3125rem 1.1875rem;
			    border-bottom: 0.03125rem solid #ddd;
			    position: relative;
				.user{
					font-size: .875rem;
					    margin-bottom: 0.625rem;
					    color: #333;
						.contact{
							color: #666;
						}
						.badge{
							display: inline-block;
							    padding: 0.125rem 0.3125rem 0.0625rem 0.4375rem;
							    margin: 0.0625rem 0 0 0.3125rem;
							    font-size: .8125rem;
							    color: #27ba9b;
							    border-radius: 0.1875rem;
							    border: 0.03125rem solid #27ba9b;
						}
				}
				.locate{
					font-size: .875rem;
					    margin-bottom: 0.625rem;
					    color: #333;
				}
				.edit{
					position: absolute;
					    top: 1.125rem;
					    right: 0.9375rem;
					    padding: 0.0625rem 0 0.0625rem 0.625rem;
					    border-left: 0.03125rem solid #666;
					    font-size: .8125rem;
					    color: #666;
					    line-height: 1;
				}
		}
	}

	
</style>
